Animation with the react-tweenful Library — Gradients and Rotation

With the react-tweenful library, we can render animations in our React app easily.

In this article, we’ll take a look at how to get started with the react-tweenful.

Gradients

We can add gradients animations with react-tweenful.

For example, we can write:

App.js

import React from "react";
import Tweenful, { elastic } from "react-tweenful";
import "./styles.css";

export default function App() {
  const elements = new Array(5)
    .fill(0)
    .map((_e, i) => (
      <Tweenful.div
        className={`gradient${i + 1} box`}
        loop={true}
        easing={elastic(1, 0.1)}
        duration={3000}
        delay={i * 100}
        endDelay={(10 - i) * 100}
        animate={[{ height: "20%" }, { height: ["20%", "auto"] }]}
        key={i}
      ></Tweenful.div>
    ));

  return (
    <div className="gradients-container">
      <div className="row">{elements}</div>
    </div>
  );
}

styles.css

.row {
  display: flex;
  flex-direction: row;
}

.gradient1.box {
  background-color: #fafa6e;
  height: 100px;
  width: 50px;
}

.gradient2.box {
  background-color: #d7f171;
  height: 100px;
  width: 50px;
}

.gradient3.box {
  background-color: #b5e877;
  height: 100px;
  width: 50px;
}

.gradient4.box {
  background-color: #95dd7d;
  height: 100px;
  width: 50px;
}

.gradient5.box {
  background-color: #77d183;
  height: 100px;
  width: 50px;
}

We create the elements with an array and map those to the Tweenful.div component.

We set the className of the div.

We set loop to true to loop the animation indefinitely.

easing has the easing function to apply.

delay has the start delay for the animation.

endDelay has the end delay duration for the animation.

animate has an array with the styles applied at the start of the animation and at the end respectively.

Then we render all that in the JSX.

In styles.css , we set the styles for the divs.

Rotation

We can add keyframes with react-tweenful to create more complex animations.

For example, we can write:

App.js

import React from "react";
import Tweenful, { percentage } from "react-tweenful";
import "./styles.css";

const rotate = percentage({
  "0%": { translate: "-50% -50%", rotate: "0deg" },
  "50%": { translate: "-50% -50%", rotate: "0deg" },
  "80%": { translate: "-50% -50%", rotate: "360deg" },
  "100%": { translate: "-50% -50%", rotate: "360deg" }
});
const dot1Animate = percentage({
  "0%": { scale: 1 },
  "20%": { scale: 1 },
  "45%": { translate: "16px 12px", scale: 0.45 },
  "60%": { translate: "160px 150px", scale: 0.45 },
  "80%": { translate: "160px 150px", scale: 0.45 },
  "100%": { translate: "0px 0px", scale: 1 }
});
const dot2Animate = percentage({
  "0%": { scale: 1 },
  "20%": { scale: 1 },
  "45%": { translate: "-16px 12px", scale: 0.45 },
  "60%": { translate: "-160px 150px", scale: 0.45 },
  "80%": { translate: "-160px 150px", scale: 0.45 },
  "100%": { translate: "0px 0px", scale: 1 }
});
export default function App() {
  return (
    <div className="loading-wrapper">
      <Tweenful.div
        className="loading-circles-container"
        duration={2000}
        loop={true}
        easing="easeInOutCubic"
        transform={{ translate: "-50% -50%" }}
        animate={rotate}
      >
        <Tweenful.div
          className="dot dot-1"
          duration={2000}
          easing="easeOutCubic"
          loop={true}
          transform={{ translate: "0px 0px", scale: 1 }}
          animate={dot1Animate}
        ></Tweenful.div>
        <Tweenful.div
          className="dot dot-2"
          duration={2000}
          easing="easeOutCubic"
          loop={true}
          transform={{ translate: "0px 0px", scale: 1 }}
          animate={dot2Animate}
        ></Tweenful.div>
      </Tweenful.div>
    </div>
  );
}

styles.css

.dot.dot-1 {
  background-color: red;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.dot.dot-2 {
  background-color: green;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

We have the rotate , dot1Animate , and dot2Animate object that has the animation progress as the keys and the styles to apply at the given progress as the value.

We translate and rotate the elements that has the animate prop set to these objects.

In the Tweenful.div components, we set the transform prop to transform the items more.

We also set the easing and set loop to true to repeat the animation forever.

In styles.css , we add the styles for the divs.

Now we should see 2 rotating divs.

Conclusion

We can add gradients and rotation with react-tweenful.